<app-header title="详情">
</app-header>
<ng-container *ngIf="detail">
  <div class="content" [@slideUp]>
    <div class="theme-header">
      <div class="info">
        <img [src]="detail.author.avatar_url" preview="4rem" alt="">
        <div class="collect">
          <p class="author">{{detail.author.loginname}}</p>
          <p *ngIf="isCollect" class="active">
            <a (click)="deCollectTopic(detail.id)">已收藏<mdl-icon>star</mdl-icon></a>
          </p>
          <p *ngIf="!isCollect">
            <a (click)="collectTopic(detail.id)">收藏<mdl-icon>star</mdl-icon></a>
          </p>
        </div>
        <div class="op">
          <p class="create-time">发表于：{{detail.create_at | fromNow}}</p>
          <p class="display">
            <span class="visit_count"><mdl-icon>visibility</mdl-icon>{{detail.visit_count}}</span>
            <span class="reply_count"><mdl-icon>chat_bubble</mdl-icon>{{detail.reply_count}}</span>
          </p>
        </div>
      </div>
    </div>
    <h2 class="content-title">{{detail.title}}</h2>
    <div class="markdown-body" [innerHtml]="detail.content"></div>
    <p class="reply-count">
      共{{detail.replies.length}}条评论
    </p>
    <div class="reply">
      <app-reply [replys]="detail.replies" (onReply)="submitReply($event)"></app-reply>
    </div>
    <form (ngSubmit)="onSubmit()" class="reply-form">
      <mdl-textfield type="text" label="回复..." rows="2" maxrows="2" name="content" floating-label [(ngModel)]="content" #accessTokenRef="ngModel">
      </mdl-textfield>
      <div>
        <button mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple type="submit">
        提交
      </button>
      </div>
    </form>
  </div>
</ng-container>
<template [ngIf]="!detail">
  <div class="loading">
    <mdl-spinner [active]="true"></mdl-spinner>
  </div>
</template>